<template>
	<div id="templatemanagement" class="min_width">
		<!-- 头部导航 -->
		<Header :chooseIt='chooseIt'></Header>
		<main class="mainShow">
			<!-- 左侧导航 -->
			<div class="main-left">
				<!-- 多级导航 -->
				<el-aside width="100%" style="color: #333">
					<el-menu default-active="/onlineTemplate" :router="true" >
						<el-menu-item index="/onlineTemplate" :class="{'isActive': active=='/onlineTemplate'}"  @click='reload()'>
							<span slot="title">价格模板</span>
						</el-menu-item>

						<el-menu-item index="/userTemplate" :class="{'isActive':active=='/userTemplate'}"   @click='reload()'>
							<span slot="title">用户自助充值模板</span>
						</el-menu-item>

						<el-menu-item index="/partnerTemplate" :class="{'isActive':active=='/partnerTemplate'}"   @click='reload()'>
							<span slot="title">代客充值模板</span>
						</el-menu-item>

					</el-menu>
				</el-aside>

			</div>

			<!-- 右侧主内容区 -->
			<div class="main-right">
				<transition name="fade">
					<router-view class="view" :key="activeDate"></router-view>
				</transition>
			</div>
		</main>
	</div>
</template>

<script>
	export default {
		name: 'templatemanagement',
		data: function() {
			return {
				activeDate:'',
				chooseIt:10,
				active: '/onlineTemplate',
				headerFixed: true,
			}
		},
		created: function() {
      		this.active = this.$route.path;
		},
		 // 提供可注入子组件属性
		provide () {
			return {
				reload: this.reload
			}
		},
		methods: {
			//当前选中状态 reload定义
			reload() {
				// $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
				this.$nextTick(() => {
					this.activeDate = Number(Date.parse(new Date()));
				})
			},

			//获取屏幕高度
			getHeight() {
				var newHeight = $(window).height() - 100;
				$('.mainShow').css("min-height", newHeight + 'px');
			},

		},
		mounted() {
			this.getHeight();

		},
		watch: {
			'$route': function(to, from) {
				this.active = to.path;
			},
			deep: true
		}
	}
</script>

<style>
	body {
		margin: 0;
	}
</style>
